<div class="pop_up">
    <div class="pop_up_main">
        <div class="pop_up_tab">
            <div class="tab attrSetTab">
                <a href="javascript:void(0)" rel="diy_baseSet" class="on">基本设置</a>
                <a href="javascript:void(0)" rel="diy_customContent">模板设置</a>
            </div>
        </div>
        <div class="pop_up_box">
            <ul class="pop_up_box_form" id="diy_baseSet">
                <li>
                    <div class="c1">
                        数据源 ：
                    </div>
                    <div class="c2">
                        <label>
                            <input checked="checked" name="source" rel="channel_input" class="radio_select in_mr5" type="radio" value="channel"/>仅选频道
                        </label>&nbsp;
                        <label>
                            <input name="source" rel="cate_input" type="radio" value="cate" class="radio_select in_mr5" />仅选分类
                        </label>
                        <label>
                            <input name="source" rel="ids_input" type="radio" value="ids" class="radio_select in_mr5" />指定帖子Id
                        </label>
						
						<div id="channel_input" class="param_select" style="display:none;">
                            <select name="select" size="10" multiple="multiple" id="board" style="width:90%;" class="text param_post">
							<php>$tempCate = explode(',',$attr['channel']);</php>
                                <volist name="channel" id="vo">
                                 	<option value="{$vo.a}" <php>if(in_array($vo['a'],$tempCate)){ echo 'selected' ;} </php>>{$vo.t}</option>
                                </volist>
                            </select>
                        </div>
						
 						<div id="cate_input" class="param_select" style="display:none;">
                            <select name="select" size="10" multiple="multiple" id="cate" style="width:90%;" class="text param_post">
							<php>$tempCate = explode(',',$attr['cate']);</php>
                                <volist name="channel" id="vo">
                                	<php>if(isset($vo['d'])){</php>
                                    <optgroup label="{$vo.t}">
                                        <volist name="vo.d" id="so">
                                            <option value="{$so.a}" <php>if(in_array($so['a'],$tempCate)){ echo 'selected' ;} </php>>&nbsp;&nbsp;&nbsp;&nbsp;{$so.t}</option>
                                        </volist>
                                    </optgroup>
									<php>}</php>
                                </volist>
                            </select>
                        </div>
                        <div id="ids_input" style="display:none;" class="param_select">
                            <textarea cols="" rows="5" id="ids" class="text param_post" style="width:90%;"/>
               				请输入文章Id,以逗号(,)分割
                        </div>
                    </div>
                </li>
				<li>
                    <div class="c1">
                        排序：
                    </div>
                    <div class="c2">
                        <select name="u" id="order" class="param_post text">
                            <option value="id" selected="selected">按发表时间</option>
                            <option value="hits">按点击数</option>
                        </select>
                        <select name="u" id="order_t" class="param_post text">
                            <option value="DESC" selected="selected">倒序（新到旧，大到小）</option>
                            <option value="ASC">正序（旧到新，小到大）</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        结果数：
                    </div>
                    <div class="c2">
                        <input id="limit" value="10" class="param_post text"/>
                    </div>
                </li>
				
                <li>
                    <div class="c1">
                        标题：
                    </div>
                    <div class="c2">
                        <input id="title" value="" class="param_post text"/>
                    </div>
                </li>
								 <li>
                    <div class="c1">
                        标题截取：
                    </div>
                    <div class="c2">
                        <input id="words" value="10" class="param_post text"/>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        模板：
                    </div>
                    <div class="c2">
                        <select name="u" id="style" class="param_post text" onchange="changStyle($(this))">
                            <option value="sim_list" selected="selected">一栏只有标题</option>
							 <option value="listTime">一栏标题时间</option>
							 <option value="2col">两栏只有标题</option>
							 <option value="2colTime">两栏标题时间</option>

							 <option value="list">带图片列表</option>
                            <php>
                                if(isset($html)){
                            </php>
                            <option value="{$attr['style']}" selected="selected">自定义模板</option>
                            <php>
                                }
                            </php>
                        </select>
                        <a class="ml5" href="javascript:void(0)" onclick="editTpl($('#style').val())">编辑模板</a>
                    </div>
                </li>
				<li id="uploadAttach" style="display:none;">
                    <div class="c1">
                        上传图片：
                    </div>
                    <div class="c2">
                        {:W( 'UploadAttach',array( 'uid'=>$mid , 'type'=>'diy' , 'callback'=>'attach_upload_success','allow_exts'=>"bmp,gif,jpg,png",'limit'=>1) )}
                    </div>
                </li>
                <li>
                    <div class="c1">
                        模板高度：
                    </div>
                    <div class="c2">
                        <input id="tplHeight" value="" class="param_post text"/>(请输入完整高度。px为单位。可以为百分比)
                    </div>
                </li>
<!--                <li>
                    <div class="c1">
                        缓存时间：
                    </div>
                    <div class="c2">
                        <select name="u" id="cacheTime" class="param_post text">
                            <option value="0">不缓存</option>
                            <php>
                                for($i=1;$i<=10;$i++){
                            </php>
                            <option value="{$i}">{$i}分钟</option>
                            <php>
                                }
                            </php>
                        </select>
                    </div>
                </li>-->
            </ul>
            <ul class="pop_up_box_form" id="diy_customContent" style="display:none;">
                <li>
                    <div class="c1">
                        修改模板：
                    </div>
                    <div class="c2">
                        <textarea cols="" rows="5" id="customContent" class="text" style="width:90%;overflow: auto;height:400px;"/>
                        <br/>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        &nbsp;
                    </div>
                    <div class="c2">
                        <input class="btn_sea" type="submit" id="diy_saveTpl" value="保存模板">
                        <br/>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="preview" class="preview_r">
    </div>
</div>
<script>
                                                                	var index= '{$index}';
                                                                	var layout = '{$layout}';
                                                                	var parentId = '{$parentId}';
                                                                	var id = '{$id}';
                                                                	var namespace = '{$_GET['tagName']}';
                                                                    var postData = new Array();
                                                                    var defaultAttr = new Array();
                                                                    var hasDefault = false;
                                                                    var TplContent = "";
                                                                    var customTpl = '';
                                                                    var time = 'custom{:time()}';
                                                                    var sign = "{$_GET['sign']}"
                                                                    var customTplCount = 1;
                                                                    var tplData = new Array();
            						
            						<php>if(!empty($attr)){</php>
            							hasDefault = true;
            						<php>}</php>
            				
                            <volist name="attr" id="vo">
								<php>if($key == 'head_link'){</php>
									defaultAttr["{$key}"] = {$vo};
								<php>}else{</php>
            						defaultAttr["{$key}"] = "{$vo}";
								<php>}</php>
            				</volist>
            				    $(function(){
									customTpl = $('#customContent').val();
	                                if (hasDefault) {
	                                    $('.param_post').each(function(){
	                                        if ($(this).attr('type') == "radio") {
	                                            var name = $(this).attr('name');
	                                            if ($(this).val() == defaultAttr[name]) {
	                                               		$(this).attr('checked','checked');
	            										if(name == "source"){
	            											var tempId = $(this).attr('rel');
	            											$('#' + tempId).show();
	            	                                        $('#' + tempId + " textarea").focus();
	            											$('#' + tempId + " select").focus();
	            	                                        $('.param_select').not($('#' + tempId)).hide();
	            										}
	                                            }
	                                        }else if($(this).attr('type') == "checkbox"){
	            								 var name = $(this).attr('name')
	            								
	            								 if(defaultAttr[name].indexOf(',') != -1){
	            								 	 var tempArray = defaultAttr[name].split(',');
	            									 if ($.inArray($(this).val(),tempArray) != -1) {
	            	                                   		$(this).attr('checked','checked');
	            	                                }
	            								 }
	            	
	            							}
	                                      	else{
	            								if( !$(this).attr('multiple') || $(this).attr('multiple') == 'undefined'){
	            									$(this).val(defaultAttr[$(this).attr('id')]);
	            								}
	            							}
	                                    });
											for(var one in defaultAttr["head_link"]){
										if(one <=1){
											var tempId = parseInt(one)+1;
											$('.link_items'+tempId+' input:first').val(defaultAttr["head_link"][one]['title']);
											$('#linkItemsComment'+tempId).val(defaultAttr["head_link"][one]['url']);
										}
									}
	                               }
                            });
  function preview(){
                                var sendData = getPostData();
                                $.ajax({
                                    type: "POST",
                                    url: APP + '&mod=Diy&act=previewModel',
                                    data: sendData,
                                    dataType: 'json',
                                    success: function(result){
                                        $('#preview').html(result.html);
                                        var content = '<div id="diy_copyHtmlContent">\
                                            		复制源代码:<input type="text" id="copyHtmlContent" onclick="select();" style="width:150px;" />\
                                        		</div>'
										var widget = '<div id="diy_copyHtmlContent">\
                                            		复制标签:<input type="text" id="copyWidgetContent" onclick="select();" style="width:150px;" />\
                                        		</div>'		
                                        $('#preview').append(content);
										$('#preview').append(widget);
                                        $('#diy_copyHtmlContent');
                                        $('#copyHtmlContent').val(result.html).bind('click',function(){
											copyToClipboard(result.html);
										});
										$('#copyWidgetContent').val(result.widget).bind('click',function(){
											copyToClipboard(result.widget);
										});
										//$('#copyHtml').click();
                                    }
                                });
                            }
                                                                	
                                                                	function savemodel(){
                            											var sendData = getPostData();
                                                            			$.ajax({
                                                            				type : "POST",
                                                            				url  : APP + '&mod=Diy&act=saveModel',
                                                            				data : sendData,
                                                            				dataType : 'json',
                                                            				success : function(result){
                                                             					//var jsonData = eval('('+result+')');
                                                                		 		frameArray[parentId][layout][index] = result['sign'];
                                                                		 		 if($('#'+id).html() == null){
                                                            			  		 $('#placeholder').html(result['html']);
                                                                		 		 $('#placeholder')
                                                                		 			.removeAttr('class')
                                                                					.removeAttr('style')
                                                                					.addClass('mb10')
                                                                					.attr('id',id)
                                                                					.attr('rel',namespace)
            																		.attr('sign',result['sign'])
                                                                		 			.prepend('<div class="diy_edit"><div class="ico_edit"><a href="javascript:void(0)" onclick="updateDiyModel(\''+id+'\',\''+namespace+'\')" class="ico_diyedit" title="设置">设置</a> <a href="javascript:void(0)" class="ico_diydel" onclick="deleteDiy(\'' + id + '\')" title="删除">删除</a></div></div>');
                                                        		        		 }else{
                                                        		    			 	$('#'+id).html(result['html']).attr('sign',result['sign'])
            ;
                                                        		    				$('#'+id).prepend('<div class="diy_edit"><div class="ico_edit"><a href="javascript:void(0)" onclick="updateDiyModel(\''+id+'\',\''+namespace+'\')" class="ico_diyedit" title="设置">设置</a> <a href="javascript:void(0)" class="ico_diydel" onclick="deleteDiy(\'' + id + '\')" title="删除">删除</a></div></div>');
                                                        		    
                                                        		    			 }
                                                            				}
                                                            			});
                                                                		
                                                                	}
                                        							$('.radio_select').click(function(){
                                        								if($(this).attr('checked')){
                                        									$('#'+$(this).attr('rel')).show();
                            												$('#'+$(this).attr('rel')+" textarea").focus();
                                        								}
																		var childrenNode = $('.param_select').not($('#'+$(this).attr('rel')))
                                        								childrenNode.hide();
																		childrenNode.children('select').val('');
                                        								//alert($('.param_select').not($('#'+$(this).attr('rel'))).html());
                                        							})
                                    								
                                	    							function changStyle(_this){
                                										if(_this.val() == 'list'){
                                											$('#uploadAttach').show();
                                										}else{
                                											$('#uploadAttach').hide();
                            												$("#attach_upload_data input[name='attach[]']").each(function(){
                                												$(this).remove();
                                											});
                                										}
                                    								}
                                                                    function getPostData(){
                                                                        var data = new Array();
                                                                        var result;
                                                                        var checkedName = new Array();
                                                                        $('.param_post').each(function(){
                                                                            switch ($(this).attr('type')) {
                                                                                case "checkbox":
                                                                                    if ($(this).attr('checked')) {
                                                                                        var postKey = 'PARAM_' + $(this).attr('name');
                                                                                        checkedName.push($(this).val());
                                                                                        break;
                                                                                    }
                                                                                    else {
                                                                                        return true;
                                                                                    }
                                                                                case "radio":
                                                                                        if ($(this).attr('checked')) {
                                                                                            var postKey = 'PARAM_' + $(this).attr('name');
                                                                                        }
                                                                                        else {
                                                                                            return true;
                                                                                        }
                                                                                    data[postKey] = $(this).val();
                                                                                    break;
                                                                                default:
                                                                                    var postKey = 'PARAM_' + $(this).attr('id');
																					if($(this).val() != null ){
            																		 	data[postKey] = $(this).val();
																					}
                                                                            }
                                                                        });

                                                                        data['PARAM_source'] = checkedName.join(',');
                                                                        var result = 'tagName=' + namespace;
                                                                        if($('#style').val().indexOf('custom') != -1){
    																		var value = customTpl.replace(/&/g,"[@]");
    																		data['customContent'] = value;
    																	}
                                                                        
                                                                        $("#attach_upload_data input[name='attach[]']").each(function(){
                                                                            result += '&attach[]=' + $(this).val();
                                                                        });
                                                                        for (var one in data) {
                                                                            result += '&' + one + '=' + data[one];
                                                                        }
                                                                        return result;
                                                                    }
                                    								        				
        					$('.attrSetTab a').click(function(){
        						var rel = $(this).attr('rel');
    							if(rel == "diy_customContent"){
    								getTpl($('#style').val());
    							}else{
    								if($('#customContent').val() != TplContent){
    									time = time + new String( customTplCount++ );
    									customTpl = $('#customContent').val();
    									var last = $('#style option:last').val();
    									if( last.indexOf('custom') == -1 ){
    										$('#style').append('<option value="'+time+'" selected>自定义模板</option>');
    									}else{
    										$('#style option:last').val(time).attr('selected','selected');
    									}
    								}
    							}
    							
    							$(this).addClass('on');
    							$('#tb_content_list').children('p').show();
        						$('.attrSetTab').children().not($(this)).removeClass('on');
        						$('.pop_up_box').children().not($('#' + rel)).hide();
        						$('#'+rel).show();
        					})
        					
            				function editTpl(tpl){
        						getTpl(tpl);
    							$('.attrSetTab a').each(function(){
    								if($(this).attr('rel') == 'diy_baseSet'){
    									$(this).removeClass('on');
    								}else{
    									$(this).addClass('on');
    								}
    							})
    							$('.attrSetTab a[rel=diy_customContent]').addClass('on');
    							$('.attrSetTab a[rel=diy_baseSet]').removeClass('on');
    							
    							//保存模板
    							$('#diy_saveTpl').click(function(){
    								$('.attrSetTab a[rel=diy_baseSet]').click();	
    							})
    							$('#tb_content_list').children('p').hide();
        						$('#diy_baseSet').hide();
        						$('#diy_customContent').show();
            				}
        					function getTpl(tpl){
    
    							
    							if (tpl != time) {
    								if(typeof(tplData[tpl]) != 'undefined'){
    									$('#customContent').val(tplData[tpl]);
    									TplContent = tplData[tpl];
    									return ;
    								}
    								
    								$.post(APP + '&mod=Diy&act=getTpl', {
    									tpl: tpl,
    									tagName: namespace,
    									sign:sign
    								}, function(result){
    									$('#customContent').val(result);
    									tplData[tpl] = result;
    									TplContent = result;
    									$('#style').val(tpl);
    								});
    							}else{
    								$('#customContent').val(customTpl);
    							}
        					}
							
						var upload_img = new Array();
                        function attach_upload_sim_imge(info){
                            var content = $('#content').val();
                            //判断附件类型
                            //判断附件类型
                            //var imgPattern = new RegExp('^.*\.(bmp|gif|jpg|png){1}$','gi');	//图片类型匹配
                            var imgPattern = new RegExp('^.*.(bmp|gif|jpg|png){1}$', 'gi'); //图片类型匹配
                            if (imgPattern.test(info.name)) {
                                var img = SITE_URL + '/data/uploads/' + info.savepath + info.savename;
                                upload_img[info.id] = img;
                                var imgInfo = '<img src="' + img + '"/>';
                                $('#content').val(content + imgInfo);
                                attachInfo = '<p><a class="attach' + info.id + '" href="javascript:void(0)" onclick="deleteAttach(' + info.id + ')">[删除]</a>&nbsp;\
                        							 				  <a class="attach' +
                                info.id +
                                '" href="javascript:void(0)" onclick="addAttach(' +
                                info.id +
                                ')">[插入]</a>\
                        							 				<span class="attach' +
                                info.id +
                                '">' +
                                img +
                                '</span></p>';
                                $('#attach_upload_data').append(attachInfo);
                            }
                        }	
</script>
